import React from 'react'
import { HashRouter, Routes, Route, Navigate, useRoutes } from 'react-router-dom'

import RouterView from '../router/index'

import HomeHeader from '@/components/HomeHeader'

// import A from './components/A'
// import B from './components/B'
// import C from './components/C'

// import A1 from './components/A1'
// import A2 from './components/A2'
// import A3 from './components/A3'


/**
 * vue-router v6 的优势：
 *  + 如果你不考虑动态路由的话，不需要再构建路由表了，也不需要将路由分散出去了，统一管理；
 *  + 没有乱七八糟的东西，switch
 * 
 * 我认为存在的缺点：
 *  + 没有了 Redirect 重定向了，被 Navigate 替代；
 */

// const App = function App() {
//   return <HashRouter>
//     <HomeHeader></HomeHeader>

//     <div className='content'>
//       <Routes>
//         {/* Navigate 重定向，跳转到指定的路由 */}
//         <Route path='/' element={<Navigate to='/a' />} />
//         <Route path='/a' element={<A />}>
//           <Route path='/a' element={<Navigate to='/a/a1' />} />
            // {/* <Route path='a1' element={<A1 />} />
            // <Route path='a2' element={<A2 />} />
            // <Route path='a3' element={<A3 />} /> */}
            // {/* 上面这种写法是继承了父级路由 */}
//           <Route path='/a/a1' element={<A1 />} />
//           <Route path='/a/a2' element={<A2 />} />
//           <Route path='/a/a3' element={<A3 />} />
//         </Route>
//         <Route path='/b' element={<B />} />
//         <Route path='/c/:id?/:name?' element={<C />} />
//         {/* 以上都不匹配，则可以渲染404组件； Navigate 重定向，to 允许传递一个对象 */}
//         <Route path='*' element={<Navigate to={{
//           pathname: '/a',
//           search: '?lx=404'
//         }} />} />
//       </Routes>
//     </div>
//   </HashRouter>
// }


const App = function App() {
  /** Router 信息一定要包裹在 HashRouter 或 BrowserRouter 中 */
  return <HashRouter>
    <HomeHeader></HomeHeader>

    <div className='content'>
      <RouterView />
    </div>
  </HashRouter>
}

/** 存在另一种路由信息构建方式：Hook useRoutes */
// const App2 = function App() {
//   const element = useRoutes([{
//     path: '/',
//     element: <Navigate to='/a' />,
//   }, {
//     path: '/a',
//     element: <A />,
//     children: [
//       { path: '/a', element: <Navigate to='/a/a1' /> },
//       { path: '/a/a1', element: <A1 /> },
//       { path: '/a/a2', element: <A2 /> },
//       { path: '/a/a3', element: <A3 /> },
//     ]
//   }])
//   return <>
//     <HomeHeader />
//     <div className='content'>
//       {element}
//     </div>
//   </>
// }

export default App
